<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form inline size="small" :model="from" ref="from" :label-position="labelPosition" label-width="100px">
            <el-row>
              <el-col :xs="24" :sm="24" :md="24" :lg="20" :xl="20">
                <el-form-item label="账户/用户名：">
                  <el-input v-model="from.userName" placeholder="请输入账户/用户名" clearable class="selWidth w_200" />
                </el-form-item>
                <el-form-item label="类型：">
                  <el-select v-model="from.billType" placeholder="请选择类型" class="selWidth w_150" clearable>
                    <el-option :value="1" label="补仓"></el-option>
                    <el-option :value="2" label="额度变更"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="开始时间：">
                  <el-date-picker v-model="from.beginTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                    format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" clearable class="selWidth">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间：">
                  <el-date-picker v-model="from.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                    format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" clearable class="selWidth">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="3" :xl="3" class="text-right from">
                <el-form-item>
                  <el-button class="mr10" size="small" icon="el-icon-search" type="primary" @click="search()">搜索</el-button>
                  <el-button class="mr10" size="small" icon="el-icon-refresh" @click="reset()">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="btn_bt">
          <el-button class="mr10" size="small" icon="el-icon-top" @click="exportTable()">导出表格</el-button>
        </div>
      </div>
      <el-table border ref="table" v-loading="loading" :data="tableData.data" style="width: 100%" size="mini"
        highlight-current-row>
        <el-table-column prop="dataFactoryName" label="数据场" min-width="100" />
        <el-table-column prop="userName" label="账户/用户名" min-width="100" />
        <!-- <el-table-column prop="preBalance" label="变动前余额" min-width="100" /> -->
        <el-table-column prop="preBalance" label="变动前余额" min-width="100">
          <template slot-scope="scope">
            <span>{{
              parseFloat(`${scope.row.preBalance}`)
                .toFixed(2)
                .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
            }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="amount" label="变动金额" min-width="100" /> -->
        <el-table-column prop="amount" label="变动金额" min-width="100">
          <template slot-scope="scope">
            <span>{{
              parseFloat(`${scope.row.amount}`)
                .toFixed(2)
                .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
            }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="currentBalance" label="变动后余额" min-width="100" /> -->
        <el-table-column prop="currentBalance" label="变动后余额" min-width="100">
          <template slot-scope="scope">
            <span>{{
              parseFloat(`${scope.row.currentBalance}`)
                .toFixed(2)
                .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" min-width="100" />
        <el-table-column prop="approvalName" label="审批人姓名" min-width="100" />
        <el-table-column prop="createTime" label="添加时间" min-width="100" />
      </el-table>
      <div class="block">
        <el-pagination :page-sizes="[15, 30, 45, 60]" :page-size="from.limit" :current-page="from.page"
          layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange"
          @current-change="pageChange" />
      </div>
    </el-card>
  </div>
</template>

<script>
  import {
    reportGetChange,
    reportChangeExport
  } from '@/api/reportQuery'
  export default {
    data() {
      return {
        labelPosition: 'right',
        from: {
          userName: '',
          billType: '',
          beginTime: '',
          endTime: '',
          page: 1,
          limit: 15,
        },
        loading: false,
        tableData: {
          data: [],
          total: 0
        },

      }
    },
    mounted() {
      this.getlist()
    },
    methods: {
      exportTable() {
        reportChangeExport(this.from).then(res => {
          console.log('导出表格', res)
          window.open(res.filename);
        }).catch(err => {
          console.log(err)
          this.$message.error(err)
        })
      },
      search() {
        this.from.page = 1
        this.from.limit = 15
        this.getlist()
      },
      reset() {
        this.from = {
          userName: '',
          billType: '',
          beginTime: '',
          endTime: '',
          page: 1,
          limit: 15,
        }
        this.getlist()
      },
      getlist() {
        this.loading = true
        reportGetChange(this.from).then(res => {
          console.log(res)
          this.tableData.data = res.list
          this.tableData.total = res.total
          this.loading = false
        }).catch(err => {
          console.log(err)
          this.loading = false
        })
      },
      pageChange(page) {
        this.from.page = page
        this.getlist()
      },
      handleSizeChange(val) {
        this.from.limit = val
        this.getlist()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .btn_bt {
    border-top: 1px dashed #ccc;
    padding-top: 20px;
  }
  .w_200{
    width: 200px;
  }
  .w_150{
    width: 150px;
  }
</style>

